<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>我的短文</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/common.js"></script>
    <script type="text/javascript"  charset="utf-8" src="<%=basePath%>xheditor/xheditor-1.1.14-zh-cn.min.js"></script>
</head>
<style>
.xheBtn,#xheSave,#xheCancel{
	height:24px;
	text-align:center;
}

.xheDialog label{
	width:73px;
	display:inline;
}
.xheDialog input,.xheDialog select{
	width:80px;
}
.question.event .body .bd{
	position:relative;
}
.question.event .body .bd span.btn{
	position:absolute;
	top:5px;
	right:10px;
}
.box .title span{
	font-size:24px;font-weight:bold;color:#444444;font-family:'微软雅黑'
}
.box .title input{
	border:0 none;
	border-bottom:1px solid #999999;
	box-shadow:none;
}
.input-xxlarge.question{
	font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei', tohoma, sans-serif; 
	font-size:16px;
	color:#666;
}
</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub user-nav">
		<jsp:include page="include/usernav.jsp"></jsp:include>
	</div>
	<div class="main-wrap">
		<div class="box user-bd">
			<div class="tl u">
				<h3>
					我的短文
				</h3>
			</div>
			<div class="bd">
				<div class="box">
					<div class="title">
						<span>&nbsp;标题&nbsp;:&nbsp;</span>
						<input type="text" class="input-xxlarge question" id="articl-title">
					</div>
					<div class="tagsinput">
						<span id="taglist">
		                </span>
		                <span id="tagsinput_addTag" class="tagsinput-add-container badge">
		                	<input placeholder="新标签" id="tagsinput_tag" onfocus='$(this).css("width","80px")'  onblur='onblurTaginput(this)' style="color: rgb(102, 102, 102); width: 40px;">
		                	<span class="addtag" id="addUserTagBtn"><i class="icon-plus-sign"></i></span>
		                </span>
	                </div> 
					<div class="text" style="margin-top:10px;position:relative;">
						<textarea id="answer-area" name="answer" style="width:600px;height:125px" 
									class="xheditor {skin:'nostyle',html5Upload:false,forcePtag:true,cleanPaste:2,disableContextmenu:true,width:'500',upImgUrl:'<%=basePath%>xheditor/upload.html',upMultiple:1,tools:'Bold,Italic,Underline,Link,Img'}">
						</textarea>
						<label class="checkbox" style="position:absolute;top:5px;right:60px;font-size:12px;color:#999;">
			                <input type="checkbox" id="ispublic">不公开
			            </label>
						<a class="btn btn-info btn-small" onclick="publish(this)" style="position:absolute;top:3px;right:5px;">发布</a>
					</div>
				</div>
				<hr/>
                <div class="timeline" id="timeline">
                	<c:forEach var='map' items='${articles.list }'>
				        <div class='article event'>
							<div class='head'>
								<img src='upload/head/${map.user_head }?s=50' onerror='this.src="upload/head/default.jpg?s=50"'/>
							</div>
						 <div class='body'>
							<div class='hd'>
								<p>
									<span class='name'>我</span>
									<span>问自己：</span>
						        	${map.title }
								</p>
							</div>
							<div class='bd'>
								<p class='show'>
								${map.content }
								</p>
							</div>
							<div class='ft'>
								<p>
									<span class='date'>
										${map.create_at }
									</span>
									<span class='action up' onclick="doAction('article','agree',${map.id },this)">
										顶(<em>${map.agree_num }</em>)
									</span>
									<span class='action down' onclick="doAction('article','disagree',${map.id },this)">
										踩(<em>${map.disagree_num }</em>)
									</span>
									<span class='action' onclick="doAction('article','collect',${map.id },this)">
										收藏(<em>${map.collect_num }</em>)
									</span>
									<span class='action' onclick="doAction('article','favor',${map.id },this)">
										喜欢(<em>${map.favor_num }</em>)
									</span>
									<span class='action comment'>
										<a href="c/a/${map.id }.html">评论(<em>${map.comments_num }</em>)</a>
									</span>
								</p>
							</div>
						</div>
						</div>
               		</c:forEach>
                </div>
                <div class="pagination pagination-centered">
					<ul>
						<c:if test="${articles.hasPreviousPage == true}">
							<li><a href="u/self.html?page=${articles.currentPage-1 }">上一页</a></li>
						</c:if>
						<c:forEach var="x" begin="${articles.startPage }" end="${articles.endPage }" step="1"> 
							<li <c:if test="${x==articles.currentPage }">class="disabled"</c:if>><a href="u/self.html?page=${x }">${x }</a></li>
						</c:forEach>
						<c:if test="${articles.hasNextPage ==true }">
							<li><a href="u/self.html?page=${articles.currentPage+1 }">下一页</a></li>
						</c:if>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" value="${user.id }" id="currentUserId"/>
<input type="hidden" value="<%=basePath%>" id="baseUrl"/>
<script type="text/javascript">
	$(document).ready(function(){
		listen();
		initXheditor();
		
	});
	var timeout = null;
	function publish(btn){
		var title = $("#articl-title").val();
		var content = $("#answer-area").val();
		if(content.length>65535){
			alert(content.length);
			alert("内容太长了");
			return;
		}
		var ispublic = $("#ispublic").attr("checked")!=="checked";
		var tags = [];
		$("#taglist span").each(function(i,e){
			tags.push($(e).attr("name"));
		});
		var tagnum = tags.length;
		
		if($.trim(title)===''){
			alert('问题呢?');
			return;
		}
		if($.trim(content)===''){
			alert('答案呢?');
			return;
		}
		if(tagnum===0){
			alert('来些标签吧');
			return;
		}
		var data={
			title:title,
			content:content,
			ispublic:ispublic,
			tags:tags
		};
		$(btn).addClass("disabled");
		var clickfunc = $(btn).attr("onclick");
		$.ajax({
			type: "POST",  
	        url:"<%=basePath%>u/publish-article.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
			success: function(response){ 
	        	if(response){
	        		if(response.ok){
	        			alert('发布成功');
	        			$(btn).removeClass("disabled");
	        			$(btn).attr("onclick",clickfunc);
	        			location.reload();
	        		}
	        	}
	        },
		 	error: function(e){}
		});
		
	}
	function onblurTaginput(obj){
		setTimeout(function(){$(obj).css("width","40px");},1000);
	}
	function initXheditor(){		
		$("#answer-area").xheditor().settings.focus=function(){
			if(timeout!==null){
				clearTimeout(timeout);
			}
			$(".xheIframeArea").eq(0).animate({height:"400px"},1000,function(){});

		};
		$("#answer-area").xheditor().settings.blur=function(){
			timeout = setTimeout(function(){$(".xheIframeArea").eq(0).animate({height:"100px"},1000,function(){});},10000);
			
		};
	}

	function submitAnswer(btn,qid){
		var textarea = $(btn).parent().find("textarea").eq(0);
		var answer = textarea.val();
		if($.trim(answer)===""){
			alert("答案呢?");
			return;
		}
		var data = {questionId:qid,answer:answer};
		$.ajax({
			type: "POST",  
	        url:"<%=basePath%>u/submit-answer.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
			success: function(response){ 
	        	if(response){
	        		if(response.ok){
	        			$(btn).parent().html(answer);
	        		}
	        	}
	        },
		 	error: function(e){}
		});
	}
	function listen(){
		$("#addUserTagBtn").click(function(){
			var tagName = $("#tagsinput_tag").val();
//			var userId = $("#currentUserId").val();
			if($.trim(tagName)===''){
				return;
			}
			$("#taglist").append("&nbsp;<span class='label label-success' name='"+tagName+"'>&nbsp;"+tagName+"&nbsp;<i class='icon-remove-sign icon-white' onclick='$(this).parent().remove()'></i></span>");
			$("#tagsinput_tag").val('');
		});
		$('#tagsinput_tag').keydown(function(event){
	         if(event.keyCode==13){
	        	 $("#addUserTagBtn").click();
	         }
	    });
		$("#profile-input").keyup(function(e){
			if(e.keyCode===13){
				saveProfile($("#profile-input").find("i").eq(0));
			}
		});
	}
	function editorProfile(){
		$("#profile-saved").hide();
		$("#profile-editor").show();	
	}
	function changeToSaved(profile){
		$("#profile-saved").show();
		$("#profile-editor").hide();
		$("#profile-saved font").each(function(i,e){
			$(e).html(profile);
		});
	}
	function saveProfile(obj){
		var profile = $("#profile-input").val();
		var data = {"profile":profile};
		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/profilesave.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					changeToSaved(profile);
				}
	        },
	        error: function(e){}
		});
	}
	
	
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>